<template>
    <a-modal :destroyOnClose="true" :visible="visible" :footer="null" title="滑块验证" @cancel="()=>$emit('cancel')">
        <div class="silder-range" :class="rangeStatus ? 'success' : ''">
            <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"></i>
            {{ rangeStatus ? successText : startText }}
        </div>
    </a-modal>
</template>
<script>
export default {
  props: {
    //成功图标
    successIcon: {
      type: String,
      default: 'iconfont icon-check',
    },
    //成功文字
    successText: {
      type: String,
      default: '验证成功',
    },
    //开始的图标
    startIcon: {
      type: String,
      default: 'iconfont icon-turnRight',
    },
    //开始的文字
    startText: {
      type: String,
      default: '拖动滑块到最右侧',
    },
    visible: {
      type: Boolean,
      required: true,
    },
  },
  name: 'SilderVerify',
  data() {
    return {
      rangeStatus: '',
    }
  },
  methods: {
    rangeMove(e) {
      let ele = e.target
      let startX = e.clientX
      let eleWidth = ele.offsetWidth
      let parentWidth = ele.parentElement.offsetWidth
      let MaxX = parentWidth - eleWidth
      if (this.rangeStatus) {
        //不运行
        return false
      }
      document.onmousemove = (e) => {
        let endX = e.clientX
        this.disX = endX - startX
        if (this.disX <= 0) {
          this.disX = 0
        }
        if (this.disX >= MaxX - eleWidth) {
          //减去滑块的宽度,体验效果更好
          this.disX = MaxX
        }
        ele.style.transition = '.1s all'
        ele.style.transform = 'translateX(' + this.disX + 'px)'
        e.preventDefault()
      }
      document.onmouseup = () => {
        if (this.disX !== MaxX) {
          ele.style.transition = '.5s all'
          ele.style.transform = 'translateX(0)'
          this.$emit('failed', this.rangeStatus)
        } else {
          this.rangeStatus = true
                this.$emit('success', this.rangeStatus)
          
        }
        document.onmousemove = null
        document.onmouseup = null
      }
    },
  },
  watch:{
    visible: function(n){
      this.rangeStatus = ''
    }
  }
}
</script>
<style scoped>
.silder-range-wrap{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.1);
}
.silder-range {
  background-color: #e3e4e6;
  position: relative;
  transition: 1s all;
  user-select: none;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px; /*no*/
  overflow: hidden;
}
.silder-range i {
  position: absolute;
  left: 0;
  width: 60px; /*no*/
  height: 100%;
  color: #919191;
  background-color: #fff;
  border: 1px solid #bbb;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.silder-range.success {
  background-color: #7ac23c;
  color: #fff;
}
.silder-range.success i {
  color: #7ac23c;
}
.silder-range i::after{
  content:'';
  position:absolute;
  right: calc(100% + 1px) ;
  width: 500px;
  top: 0;
  bottom: 0;
  background-color: #7ac23c;
  opacity: 0.5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.silder-range i.icon-check::after{
  display: none;
}
</style>